<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户列表展现</title>
	</head>
	<body>
		<div id="app">
			ID: <input type="text" disabled="disabled" v-model="user.id"/>
			姓名:<input type="text" v-model="user.name"/>
			年龄:<input type="text" v-model="user.age"/>
			性别:<input type="text" v-model="user.sex"/>
			<button @click="updataUser">更新</button>
			
			<table  id="tab1"   border="1px" width="700px" align="center">
				<tr>
					<td colspan="5" align="center"><h1>表格数据</h1></td>
				</tr>
				<tr align="center">
					<td>ID编号</td>
					<td>名称</td>
					<td>年龄</td>
					<td>性别</td>
					<td>操作</td>
				</tr>
				<tr align="center" v-for="item in userList">
					<td v-text="item.id"></td>
					<td v-text="item.name"></td>
					<td v-text="item.age"></td>
					<td v-text="item.sex"></td>
					<td>
						<!-- 知识点:  -->
						<button @click="updataUserBtn(item)">修改</button>
						<button @click="deleteUser(item.id)">删除</button>
					</td>
				</tr>
			</table>
		</div>
		
		
		<!-- 1.导入vue.js -->
		<script src="../js/vue.js"></script>
		<!-- 2.导入axios.js -->
		<script src="../js/axios.js"></script>
		<script>
			/* 需求1. 刷新页面之后,自动的发起ajax请求 */
			axios.defaults.baseURL="http://localhost:8080"
			const app = new Vue({
				el: "#app",
				data: {
					userList: [],
					user: {
						id: '',
						name: "",
						age: '',
						sex: ""
					}
				},
				methods: {
					getUserList(){
						//发起Ajax请求
						axios.get("/getUser").then(result => {
							//将结果返回给vue中的数据
							 this.userList = result.data
						})
					},
					deleteUser(id){
						//后端参数接收  /user/{id}
						//利用restFul风格实现数据传参
						axios.delete("/user/"+id)
						.then(result =>{
							 alert(result.data)
							 //删除成功之后,重新加载列表信息id
							this.getUserList()
						})
					},
					updataUserBtn(user){
						this.user= user
						console.log(this.user)
					},
					updataUser(){//向后端传递参数
						axios.put("/updataUser",this.user)//是JSON串
						.then(result=>{
							alert(result.data)
							this.getUserList()
						})
					}
				},
				mounted(){
					//页面加载完成之后,调用函数
					this.getUserList()
				}
			})
		</script>
		
		
	</body>
</html>